<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    Flexbox翻译为弹性盒子:
    口 弹性盒子是一种用于按行或按列布局元素的一维布局方法
    口 元素可以膨胀以填充额外的空间,收缩以适应更小的空间
    口通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
    
    flex布局是目前web开发中使用最多的布局方案:
    口flex布局(Flexible 布局，弹性布局);
    口目前特别在移动端可以说已经完全普及
    口在PC端也几乎已经完全普及和使用,只有非常少数的网站依然在用浮动来布局;
    
    为什么需要flex布局呢?
    口长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
    口 但是这两种方法本身存在很大的局限性,并且他们用于布局实在是无奈之举;
    
    两个重要的概念
    口开启了 flex 布局的元素叫 flex container
    口 flex container 里面的直接子元素叫做 flex item
    当flex container中的子元素变成了flex item时,具备一下特点:口 flex item的布局将受flex container属性的设置来进行控制和布局口 flex item不再严格区分块级元素和行内级元素，
    口 flex item默认情况下是包裹内容的,但是可以设置宽度和高度
    设 display 属性为 flex 或者 inline-flex 可以成为 flex container口 flex: flex container 以 block-level 形式存在口 inline-flex: flex container 以 inline-level 形式存在
    */

    /* inline-flex  行内级盒子flex */

    /* 
    应用在flex container 上的 CSS 属性
    口 flex-flow
    flex-direction
    口flex-wrap
    justify-content
    align-items
    align-content

    应用在 flex items 上的 CSS 属性
    口 flex-grow
    flex-basis
    flex-shrink
    order
    align-self
    口 flex
    */
    .box{
        display: flex;
        flex-wrap: wrap;
        background-color: #f00;
        width: 500px;
        height:500px;
    }
    .container{
        display: flex;
        /* padding: 10px; */
        box-sizing: border-box;
        /* 修改主轴的方向 */
        /* row-reverse 主轴的反转 */
        /* column  列变成主轴的方向 */
        /* column-reverse  列变成主轴的方向反转 */
        flex-direction:row;
        /* flex-wrap 换行 */
        /* 
        flex-wrap 决定了 flex container 是单行还是多行
        口nowrap 单行(默认)
        口 wrap:多行
        口 wrap-reverse: 多行(对比 wrap，cross start 与 cross end 相反)
        */
        flex-wrap: wrap;
        /* 
        flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
        口 顺序任何,并且都可以省略: 
        */
        flex-flow: row wrap;

        /* justify-content 对齐
        
        justify-content 决定了 flex items 在 main axis 上的对齐方式
       
        口flex-start (默认值) : 与 main start 对齐
        
        口flex-end:与 main end 对齐
        
        口 center: 居中对齐
        
        spacebetween :
            √ fex items之间的距离相等
            √ 与main start、main end两端对齐 space-around :
            √ flex items之间的距离相等
            √ fexitems与 main start、main end 之间的距离是flexitems 之间距离的一半 
            
        space-evenly:
            √ fex items之间的距离相等
            √ fex items与main start、main end 之间的距离等于flex items 之间的距离
        */
        justify-content: space-between;

        /* 
        align-items

        上的对齐方式align-items 决定了flex itemscross axis
        口 normal: 在弹性布局中，效果和stretch一样
        口 stretch: 当flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
        口 flex-start: 与 cross start 对齐
        口 flex-end: 与 cross end 对齐
        口 center: 居中对齐
        口 baseline: 与基准线对齐
        */
        /* align-items:  center; */

        /* align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与justify-content 类似
        
        口 stretch (默认值) :与 align-items 的 stretch 类似
        口 flex-start: 与 cross start 对齐
        口 flex-end: 与 cross end 对齐
        口 center: 居中对齐
        D space-between:
        √ flex items 之间的距离相等
        √与cross start、cross end两端对齐
        space-around:
        fex items之间的距离相等
        √ flex items 与 cross start、cross end 之间的距离是flex items 之间距离的一半 space-evenly:
        fex items之间的距离相等
        flex items与cross start、cross end 之间的距离 等于fex items 之间的距离
        
        
        */
        /* align-content: flex-start; */

        /* order  为flex item 排序 默认为0 值小的在前 */

        /* align-self  
        
         flex items 可以通过 align-self 覆盖 fex container 设置的 align-items口auto (默认值): 遵从flex container 的 align-items 设置口 stretch、flex-start、 flex-end、center、 baseline，效果跟 align-items 一致
         */
        align-items:center;
        /* flex-grow
        flex-grow 决定了 flex items 如何扩展(拉伸/成长)
        口 可以设置任意非负数字(正小数、正整数、0) ，默认值是 0
        口当flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
        */
        /* 
        flex-shrink
        flex-shrink 决定了 flex items 如何收缩(缩小)
        口 可以设置任意非负数字 (正小数、正整数、0) ，默认值是 1
        口当flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
        */
        /* 
        fex-basis 用来设置 fex items?
        main axis 方向
        base size
        口 auto (默认值)、具体的宽度数值 (100px)
        */
        background-color: rgb(96, 227, 245);
        width: 500px;
        height:500px;
    }
    .item{
        width: 120px;
        height: 120px;
    }
    .item1{
        height: 80px;
        font-size: 30px;

    }
    .item2{
        height: 150px;
        align-self: flex-start;
        font-size: 40px;
    }
    .item3{
        height: 60px;
        font-size: 12px;
        /*  flex 是 flexgrowll flex-shrink |l flex-basis 的简写,flex 属性可以指定1个，2个或3个值,
        单值语法: 值必须为以下其中之一:
        口一个无单位数(<number>): 它会被当作<flex-grow>的值
        口 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值
        口关键字none，auto或initial.

        双值语法: 第一个值必须为一个无单位数，并且它会被当作 <fex-grow> 的值
        口 第二个值必须为以下之一:
        √一个无单位数: 它会被当作 <flex-shrink>的值
        √一个有效的宽度值: 它会被当作 <flex-basis>的值
        
        三值语法:
        口 第一个值必须为一个无单位数，并且它会被当作 <flexgrow>的值
        口 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink>的值
        口 第三个值必须为一个有效的宽度值，并且它会被当作 <fex-basis>的值

        */
        flex-grow: 1;
    }
    img{
        width:500px;
    }
</style>
<body>
    <!-- <div>
        <img src="../imgs/flex.jpg" alt="">
    </div>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div> -->
    <div class="container">
        <div class="item item1">1x</div>
        <div class="item item2">2x</div>
        <div class="item item3">3x</div>
        <!-- <div class="item item4">4x</div> -->
        <!-- 
        <div class="item item5">5</div>
        <div class="item item6">6</div> -->
    </div>
    <!-- 为.item加上随机背景颜色 -->
    <script src="./itemRandomColor.js"></script>
</body>
</html>